<template>
  <sub-view
    class="register"
  >
    <van-form class="form" validate-first @submit="onSubmit">
      <p class="title">ipackage</p>
      <div class="panel">
        <van-field
          v-model="user.username"
          label-width="7rem"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[
            { required: true, message: '请输入用户名' },
            { validator: usernameCheck, message: '用户名已存在' }
          ]"
        />
        <van-field
          v-model="user.password"
          label-width="7rem"
          type="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <van-field
          label-width="7rem"
          v-model="pwdCf"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="[{ validator:pswConfirm, message: '两次密码输入不同' }]"
        />
        <van-field
          label-width="7rem"
          name="radio"
          label="用户类型"
        >
          <template #input>
            <van-radio-group
              v-model="user.state"
              class="radio-group"
              direction="horizontal"
              icon-size="1rem"
            >
              <van-radio :name=1>客户</van-radio>
              <van-radio :name=2>快递员</van-radio>
              <van-radio :name=3>管理员</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <transition name="up" appear>
          <van-field
            v-if="user.state > 1"
            v-model="user.keyword"
            label-width="7rem"
            label="创建密匙"
            type="password"
            placeholder="请输入用户创建密钥"
            :rules="[{ required: true, message: '请输入用户创建密钥' }]"
          />
        </transition>
      </div>
      <div class="buttons">
        <van-button
          round
          block
          class="button"
          type="info"
          native-type="submit"
        >
          注册
        </van-button>
        <van-button
          round
          block
          class="button"
          @click="back"
          native-type="button"
        >
          返回登录
        </van-button>
      </div>
    </van-form>
  </sub-view>
</template>

<script>
import SubView from 'components/sub-view/sub-view'
import { User } from 'classes/user'
import { nameCheck, doRegister } from 'service/user'
export default {
  name: 'register',
  data () {
    return {
      user: new User(),
      pwdCf: '',
      userMsg: '请输入用户名'
    }
  },
  methods: {
    back () {
      this.$router.push({
        path: '/login'
      })
    },
    onSubmit () {
      this.$toast.loading({
        duration: 0,
        message: '注册中...',
        forbidClick: true
      })
      doRegister(this.user)
        .then(id => { this.loadSuc() })
        .catch(message => {
          this.$toast.fail({
            message
          })
        })
    },
    loadSuc () {
      this.$toast.success({
        message: '提交成功'
      })
      this.$router.push({
        path: '/list'
      })
    },
    pswConfirm () {
      return this.pwdCf === this.user.password
    },
    usernameCheck () {
      return new Promise((resolve) => {
        nameCheck(this.user.username).then(() => {
          resolve(true)
        }).catch(() => {
          resolve(false)
        })
      })
    }
  },
  components: {
    SubView
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~stylus/method"
  .van-form
    position: absolute
    top: 15%
    width: 100%
    .title
      margin-bottom: 6rem
      font-weight: bold
      font-size: 5rem
      text-align: center
    .panel
      panel()
      margin: 0 2rem
      .up-enter-active, .up-leave-active
        transition: all .3s
      .up-enter, .up-leave-to
        opacity: 0
        height: 0
        padding-top: 0
        padding-bottom: 0
    .buttons
      margin: 4rem 3rem
      .button
        margin-top: 1rem
</style>
